<template>
  <div>
    <KLineChart
      width="100%"
      height="248px"
      x-type="date"
      y-type="number"
      :x-data="lineChartXData"
      :y-data="lineChartYData"
      :options="{ showSeriesName: true, seriesName: '点击率' }"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { KLineChart } from '@/components/k-charts';
const lineChartXData = ref([]);
const lineChartYData = ref<any[]>([]);

defineOptions({
  name: 'DemoChart'
});

const handleTransferData = () => {
  const xList = [];
  const seriesList = [];
  const data = [
    {
      date_code: 20230827,
      view_count: 5671899,
      collect_count: 7214,
      popularity_count: 45000,
      spu_count: 4,
      spu_sales: 91692,
      view_count_str: '567.2万',
      collect_count_str: '7214',
      popularity_count_str: '4.5万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230828,
      view_count: 5531102,
      collect_count: 7247,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91698,
      view_count_str: '553.1万',
      collect_count_str: '7247',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230829,
      view_count: 5560232,
      collect_count: 7244,
      popularity_count: 44000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '556万',
      collect_count_str: '7244',
      popularity_count_str: '4.4万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230830,
      view_count: 5541829,
      collect_count: 7240,
      popularity_count: 44000,
      spu_count: 4,
      spu_sales: 91688,
      view_count_str: '554.2万',
      collect_count_str: '7240',
      popularity_count_str: '4.4万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230831,
      view_count: 5559631,
      collect_count: 7257,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91694,
      view_count_str: '556万',
      collect_count_str: '7257',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230901,
      view_count: 5564114,
      collect_count: 7201,
      popularity_count: 44000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '556.4万',
      collect_count_str: '7201',
      popularity_count_str: '4.4万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230902,
      view_count: 5517350,
      collect_count: 7198,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '551.7万',
      collect_count_str: '7198',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230903,
      view_count: 5501592,
      collect_count: 7182,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91688,
      view_count_str: '550.2万',
      collect_count_str: '7182',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230904,
      view_count: 5514686,
      collect_count: 7191,
      popularity_count: 43000,
      spu_count: 5,
      spu_sales: 93356,
      view_count_str: '551.5万',
      collect_count_str: '7191',
      popularity_count_str: '4.3万',
      spu_count_str: '5',
      spu_sales_str: '9.3万'
    },
    {
      date_code: 20230905,
      view_count: 5512906,
      collect_count: 7189,
      popularity_count: 44000,
      spu_count: 4,
      spu_sales: 90028,
      view_count_str: '551.3万',
      collect_count_str: '7189',
      popularity_count_str: '4.4万',
      spu_count_str: '4',
      spu_sales_str: '9万'
    },
    {
      date_code: 20230906,
      view_count: 5523702,
      collect_count: 7183,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91689,
      view_count_str: '552.4万',
      collect_count_str: '7183',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230907,
      view_count: 5501592,
      collect_count: 7182,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '550.2万',
      collect_count_str: '7182',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230908,
      view_count: 5501592,
      collect_count: 7182,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '550.2万',
      collect_count_str: '7182',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230909,
      view_count: 5503185,
      collect_count: 7183,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '550.3万',
      collect_count_str: '7183',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    },
    {
      date_code: 20230910,
      view_count: 5505864,
      collect_count: 7182,
      popularity_count: 43000,
      spu_count: 4,
      spu_sales: 91687,
      view_count_str: '550.6万',
      collect_count_str: '7182',
      popularity_count_str: '4.3万',
      spu_count_str: '4',
      spu_sales_str: '9.2万'
    }
  ];
  data.forEach((item) => {
    xList.push(dayjs(item.date_code.toString(), 'YYYYMMDD').unix());
    seriesList.push(item['view_count']);
  });
  lineChartXData.value = xList;
  lineChartYData.value = [
    {
      name: '点击率',
      color: '#4975E9',
      data: seriesList
    }
  ];
};

onMounted(() => {
  handleTransferData();
});
</script>

